<template>
  <div>
    <div class="orderList">
      <div class="topNav">
        <div class="my-header">
          <i class="back iconfont icon-left" @click="$router.go(-1)"></i>
          <strong>订单列表</strong>
          <i style="min-width: 0.65rem;"></i>
        </div>
        <div class="orderStatus">
          <div class="tab" ref="tab">
            <ul class="tab_content" ref="tabcontent">
              <li class="tab_item" v-for="(item,index) in TabList" ref="tabitem" :key="index" @click="checkStatus(index)" :class="{'check':index == checkClr}">
                {{item.sortname}}
              </li>
            </ul>
          </div>
          <i :class="'more-bot'" @click="()=>flag=!flag"></i>
          <!--<transition-group name="fade" tag="div">-->
          <div class="dropList" v-if="flag" key="1">
            <div class="list-title">
              <span class="status">选择状态</span>
              <i :class="'more-top'" @click="()=>flag=!flag"></i>
            </div>
            <div class="statusIndex">
              <span v-for="(item,index) in TabList" :key="index" @click="checkStatus(index)" :class="{'checkBgc':index == checkClr}">{{item.sortname}}</span>
            </div>
          </div>
          <!--</transition-group>-->
          <!--<transition-group name="fade" tag="div">-->
          <div class='popContainer' v-if="flag" key="2" @click="()=>flag=false"></div>
          <!--</transition-group>-->
        </div>
      </div>
      <!--:bottom-method="loadBottom"-->
      <!--<div style="overflow:scroll">-->
      <!--<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">-->
      <div class="orderGoods" v-infinite-scroll="fetchData" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <div class="orderIndex" v-for="(item,index) in orderList" :key="index">
          <div class="c-title">{{item.supplierWarehouse}}
            <span class="status">{{item.orderStatus|orderStatus}}</span>
          </div>
          <!--<router-link :to="{ path: 'orderDetails', query: { orderId: item.orderId }}">-->
          <div @click="$router.push({ path: 'orderDetails', query: { orderId: item.orderId,tab:orderStatus }})">
            <div class="c-order" v-for="(item,index) in item.orderGoodsList" :key="index">
              <div class="order-mid">
                <p>{{item.sellingPoints}}</p>
                <span>货号：{{item.goodsCode}}</span><br>
                <span v-if="!item.sizeAlias">尺码：{{item.goodsSpec}}</span>
                <span v-if="item.sizeAlias">尺码：{{item.goodsSpec}}({{item.sizeAlias}})</span>
              </div>
              <img :src="item.goodsImg" alt="" class="pic">
              <div class="order-right">
                <p>&yen;{{item.goodsDiscountPrice|formatMoney}}</p>
                <span class="count">&yen;{{item.goodsPrice|formatMoney}}</span><br>
                <span>x{{item.goodsNum}}</span>
                <button v-if="item.returnStatus" @click.stop="$router.push({ path: 'refundDetails', query: { returnId: item.returnId }})">{{item.returnStatus|returnStatus}}</button>
              </div>
            </div>
          </div>
          <!--</router-link>-->
          <p class="orderPrice">共{{item.orderGoodsNum}}件商品 合计：&yen;{{item.orderPayPrice|formatMoney}}（含运费：{{item.orderFreight|formatMoney}}）</p>
          <div class="btn-box">
            <button v-if="item.orderStatus == 1" @click="close(item.orderId)">撤销订单</button>
            <button @click="refundApply(item)" v-if="showAfterSale(item)">申请售后</button>
            <!--<router-link :to="{ path: 'refundApply', query: { orderId: item.orderId }}">申请售后</router-link>-->
            <button v-if="item.orderStatus == 3||item.orderStatus == 4" @click="post(item.express, item.expressNumber)">查看物流</button>
            <button @click="goPay(item.orderId)" class="orange payBtn" v-if="item.orderStatus == 1">付款</button>
            <button class="orange confirm" v-if="item.orderStatus == 3" @click="confirm(item.orderId)">确认收货</button>
            <button v-if="item.orderStatus == 4||item.orderStatus == 5" @click="deleteOrder(item.orderId)">删除订单</button>
          </div>
        </div>
      </div>
      <!--</mt-loadmore>-->
      <!--</div>-->
      <div class="empty-tips" v-if="orderList == '' && loadDone">
        <p>暂时没有订单</p>
      </div>
    </div>
    <!--<mt-popup v-model="visiblePopup" class="tip-pop">
      ddd
    </mt-popup>-->
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  import {
    getOrderInfo,
    closeOrder,
    deleteCloseOrder,
    confirmOrder
  } from '@/api/order'
  import {
    encryptString
  } from '@/utils'
  import {
    MessageBox,
    Toast
  } from 'mint-ui'
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        visiblePopup: false,
        loading: false,
        initState: false,
        params: {
          pageIndex: 1,
          pageSize: 2,
          orderType: 3, // 订单类型(3：分享)
          payPassageway: 8 //	订单来源( 8：H5页面)
        },
        hasNext: true,
        flag: false,
        loadDone: false,
        orderStatus: '',
        orderList: [],
        checkClr: 0,
        TabList: [
          //
          {
            sortname: '全部'
          },
          {
            sortname: '待付款'
          },
          {
            sortname: '待发货'
          },
          {
            sortname: '待收货'
          },
          {
            sortname: '交易成功'
          },
          {
            sortname: '交易关闭'
          },
          {
            sortname: '退货退款'
          }
        ]
      }
    },
    watch: {
      $route() {
        this.orderStatus = this.$route.query.tab
      },
      orderStatus() {
        // 重新加载
        this.reload()
      }
    },
    components: {},
    created() {
      this.$nextTick(() => {
        this.bScroll()
        this.initState = true
        // tab
        this.orderStatus = this.$route.query.tab
      })
    },
    filters: {
      orderStatus(val) {
        return val === 0 ? '' : val === 1 ? '待付款' : val === 2 ? '待发货' : val === 3 ? '待收货' : val === 4 ? '已完成' : val ===
          5 ? '已撤销' : '未知'
      },
      returnStatus(val) {
        return val === 0 ? '' : val === 1 ? '待审核' : val === 2 ? '等待寄回' : val === 3 ? '已寄回' : val === 4 ? '已确认' : val ===
          5 ? '已拒绝' : val === 6 ? '已撤销' : val === 7 ? '待退款' : val === 8 ? '退款成功' : '未知'
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        orderState: 'orderState'
      })

    },
    methods: {
      refundApply(item) {
        const now = new Date().getTime()
        const day = Math.floor((now - item.orderConfirmDate) / parseInt(1000 * 60 * 60 * 24))
        if (day >= 10) {
          MessageBox({
            title: '提示',
            confirmButtonText: '确定',
            message: '<p>您已经错过了申请售后时间(交易完成10天内)' +
              '<p>如果您有换货或维修的诉求，建议您联系客服</p>' +
              '<p>客服电话:<a href="tel://021-50588886">021-50588886</a></p>' +
              '<p>客服QQ: <a href ="http://wpa.qq.com/msgrd?v=3&uin=1224652134&site=qq&menu=yes">1224652134</a></p>',
            showCancelButton: false
          }).then(action => {})
        }
      },
      // 是否显示申请售后
      showAfterSale(item) {
        if (item.orderGoodsList === undefined) return false
        let count = 0
        item.orderGoodsList.forEach(good => {
          if (good.returnStatus !== 0) {
            count++
          }
        })
        const arr = [2, 3, 4]
        if (count !== item.orderGoodsList.length && arr.includes(item.orderStatus)) {
          return true
        }
      },
      bScroll() {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.tab, {
            startX: 0,
            click: true,
            scrollX: true,
            scrollY: false,
            eventPassthrough: 'vertical'
          })
        } else {
          this.scroll.refresh()
        }
      },
      fetchData() {
        if (!this.userInfo) return
        // 解决刷新页面会调用两次
        if (this.initState) {
          this.initState = false
          return false
        }
        if (!this.hasNext) return
        this.loading = true
        // 获取订单信息
        const formData = {
          userId: this.userInfo.id,
          orderStatus: this.$route.query.tab,
          pageIndex: this.params.pageIndex,
          pageSize: this.params.pageSize,
          orderType: this.params.orderType,
          payPassageway: this.params.payPassageway
        }
        getOrderInfo(formData).then(res => {
          this.orderList = this.orderList.concat(res.data.orderList)
          this.hasNext = res.data.hasNext
          this.loading = false
          this.params.pageIndex += 1
          this.loadDone = true // 是否显暂无订单
        }).catch(err => {
          console.log(err)
        })
      },
      checkStatus(index, event) {
        this.$router.replace({
          name: 'order',
          query: {
            tab: index
          }
        })
      },
      reload() {
        this.flag = false
        this.orderList = []
        this.hasNext = true
        this.params.pageIndex = 1
        const index = this.$route.query.tab
        this.checkClr = index
        this.scroll.scrollToElement(this.$refs.tabitem[index], 300, -190)
        this.fetchData()
      },
      close(orderId) {
        MessageBox.confirm('确定撤销该订单?').then(action => {
          closeOrder({
            orderId: orderId
          }).then(res => {
            Toast('订单已撤销')
            // 重新加载
            this.reload()
          })
        })
      },
      deleteOrder(orderId) {
        MessageBox.confirm('确定删除订单?').then(action => {
          deleteCloseOrder({
            orderId: orderId
          }).then(res => {
            Toast('订单已删除')
            // 重新加载
            this.reload()
          })
        })
      },
      post(express, expressNumber) {
        window.location.href = 'https://m.kuaidi100.com/index_all.html?type=' + express + '&postid=' +
          expressNumber
      },
      confirm(orderId) {
        // 确认收货
        const formData = {
          userId: this.userInfo.id,
          orderId: orderId
        }
        MessageBox.confirm('确认收货?').then(action => {
          confirmOrder(formData).then(res => {
            Toast('确认订单成功')
            // 重新加载
            this.reload()
          })
        })
      },
      goPay(orderid) {
        this.$router.push({
          name: 'pay',
          query: {
            orderid: encryptString(orderid, 1)
          }
        })
      }
    }
  }

</script>
<style lang="scss">
  @import '~assets/common/css/mixin.scss';
  .orderList {
    min-height: 100vh; // margin-top: 45px;
    .topNav {
      width: 100%;
      position: fixed;
      z-index: 2;
      top: 0;
      .my-header {
        position: relative;
      }
      .orderStatus {
        background-color: #fff;
        border-bottom: 1px solid #ECECEC;
        overflow: hidden; // position: fixed;
        position: relative;
        .tab {
          width: 100%;
          overflow: hidden;
        }
        .tab_content {
          min-width: 530px;
          float: left;
        }
        .tab_item.check {
          border-bottom: 2px solid $red;
          color: $red;
        }

        .tab_item {
          display: inline-block;
          font-size: 12px;
          padding: 0 1.3em;
          height: 40px;
          line-height: 40px;
          text-align: center;
          position: relative;
        }
        .more-bot {
          right: 0;
          top: 0;
          height: 40px;
          width: 35px;
          position: absolute;
          z-index: 1;
          background: #fff;
        }
        .more-bot::after {
          border: solid 2px #c8c8cd;
          border-bottom-width: 0;
          border-left-width: 0;
          content: " ";
          top: 50%;
          right: 15px;
          position: absolute;
          width: 5px;
          height: 5px;
          -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(135deg);
        }
        .dropList {
          height: 192px;
          width: 100%;
          background-color: #fff;
          position: fixed;
          z-index: 2;
          top: 45px;
          .list-title {
            background-color: #fff;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: inherit;
            min-height: 48px;
            display: block;
            overflow: hidden;
            position: relative;
            text-decoration: none;
            padding-left: 10px;
            .status {
              font-size: 16px;
              line-height: 48px;
              color: #989898;
            }
            .more-top::after {
              border: solid 2px #c8c8cd;
              border-bottom-width: 0;
              border-left-width: 0;
              content: " ";
              top: 50%;
              right: 20px;
              position: absolute;
              width: 5px;
              height: 5px;
              -webkit-transform: translateY(-50%) rotate(45deg);
              transform: translateY(-50%) rotate(-45deg);
            }
          }
          .statusIndex {
            padding: 0 3.5%;
            overflow: hidden;
            span {
              width: 31%;
              height: 35px;
              display: inline-block; // color: #FFF;
              // background-color: #F60;
              border: 1px solid #ECECEC;
              text-align: center;
              line-height: 35px;
              float: left;
              margin-right: 3.5%;
              margin-bottom: 10px;
            }
            .checkBgc {
              background-color: $red;
              color: #FFF;
            }
            span:nth-child(3n) {
              margin-right: 0;
            }
          }
        }
        .popContainer {
          position: fixed;
          z-index: -1;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.3);
        }
      }
    }
    .orderGoods {
      // min-height: 100vh;
      padding-top: 85px;
      padding-bottom: 40px;
      .orderIndex {
        background-color: #fff;
        margin-top: 10px;
        border-top: 1px solid #D4DCE1;
        border-bottom: 1px solid #D4DCE1;
        .c-title {
          height: 30px;
          line-height: 30px;
          padding: 0 10px;
          .status {
            color: $red;
            float: right;
          }
        }
        .c-order {
          padding: 10px 100px;
          background-color: rgb(252, 252, 252);
          overflow: hidden;
          margin-bottom: 3px;
          color: #000;
          .pic {
            position: relative;
            float: left;
            width: 70px;
            // height: 85px;
              height: auto;
            margin-left: -100%;
            left: -90px;
          }
          .order-mid {
            position: relative;
            float: left;
            width: 100%;
            height: 100%; //   line-height: 25px;
            p {
              @include textoverflow(2);
            }
            span {
              color: rgb(190, 190, 190);
              margin-top: 10px;
              display: inline-block;
            }
          }
          .order-right {
            text-align: right;
            position: relative;
            vertical-align: top;
            float: right;
            width: 65px;
            height: 100%;
            margin-left: -190px;
            right: -90px;
            line-height: 25px;
            span {
              color: rgb(190, 190, 190);
              float: right;
            }
            .count {
              text-decoration: line-through;
            }
            button {
              width: 65px;
              height: 25px;
              display: inline-block;
              border: 1px solid #CECECE;
              background-color: #F0F0F0;
              border-radius: 2px;
              margin-top: 15px;
            }
          }
        }
        .orderPrice {
          line-height: 50px;
          font-size: 14px;
          text-align: right;
        }
        .btn-box {
          text-align: right;
          height: auto;
          button,
          a {
            width: 65px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            display: inline-block;
            color: #8B8B8B;
            border: 1px solid #CECECE;
            background-color: #fff;
            border-radius: 2px;
            margin-bottom: 15px;
            margin-right: 10px;
          }
          .orange {
            color: $red;
            border-color: $red;
          }
        }
      }
    }
    .empty-tips {
      margin-top: 40px;
      position: relative;
      z-index: 1;
      padding: $padding 25px;
      @include flexbox(flex-start,
      center,
      column,
      nowrap);
      i {
        color: #999;
        font-size: 60px;
      }
      .info-btn {
        border: 1px solid $red;
        color: $red;
        background: transparent;
        width: 80px;
        height: 25px;
        border-radius: 2px;
      }
      p {
        font-size: 14px;
        color: #999;
        line-height: 2;
      }
    }
  }

</style>
